<template>
	<s-layout navbar="custom" tabbar="/pages/public/huodong">
		<view class="container" v-for="(item, index) in state.data" @click="navigateToDetail(item.url)">
			<image class="activity-image" :src="sheep.$url.cdn(item.image)" mode="widthFix" />
			<view class="activity-content">
				<view class="activity-title">{{ item.title }}</view>
				<view class="activity-description">{{ item.subtitle }}</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive
	} from 'vue';
	import sheep from '@/sheep';

	const state = reactive({
		data: []

	});

	async function getContent() {
		const {
			code,
			data
		} = await sheep.$api.data.huodong();
		if (code === 1) {
			state.data = data;
		}
	}
	onLoad((options) => { 
		getContent();
		console.log(state.data)
	});

	function navigateToDetail(url) {
		console.log(url);
		sheep.$router.go(url)
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: center;
		margin: 14px 10px;
		background-color: #FFFFFF;
		border-radius: 10px;
	}

	.activity-image {
		width: 100%;
		height: 300px;
		border-radius: 10px;
	}

	.activity-content {
		padding-left: 8px;
	}

	.activity-title {
		font-size: 16px;
		margin-bottom: 10px;
		font-weight: bold;
		margin-top: 10px;
	}

	.activity-description {
		font-size: 14px;
		color: #555;
		margin-bottom: 20px;
	}

	.activity-button {
		width: 200px;
		height: 50px;
		background-color: #1aad19;
		color: #fff;
		border: none;
		border-radius: 5px;
		font-size: 16px;
	}
</style>